<template>
   <div class="wrapper index-design">
       <div class="container">
           <div class="title">
                <h1 class="ac-title">精彩案例</h1>
                <router-link 
                tag="a" target="_blank"
                :to="{name:'deisgnList'}"
                class="go">查看更多></router-link>    
           </div>
            <div class="swiper-body">
                <swiper :options="swiperOption" >
                    <!-- slides -->
                    

                    <swiper-slide  v-for="item of data" :key="item.id">
                    <router-link
                    :to="{name:'designDetail', params: {id:item.id}}" 
                    class="swiper-item" 
                    target="_blank"
                    
                    >
                        <div class="left">
                            <div class="left-img">
                                <img :src="item.url" alt="">
                            </div>
                            <p class="name">
                                {{item.name}}
                                <span class="work">{{item.work}}</span>
                            </p>
                            <p class="years">设计经验：{{item.years}}年</p>
                            <p class="years">设计作品：{{item.work_number}}年</p>
                            <p class="years">签约单数：{{item.sale_number}}年</p>
                            <p class="years">擅长设计领域：{{item.filed}}</p>
                            <p class="years">擅长设计风格：{{item.style}}</p>
                        </div>
                        <div class="right">
                            <div 
                            class="right-item"
                            v-for="item2 of item.items" :key="item2.id"
                            >
                                <img :src="item2.url2" alt="">    
                            </div>  
                            
                            <div class="right-item item-word">
                                <div class="word-title">{{item.items_firsttitle}}</div>    
                                <h5 class="word-hit">已有 {{item.items_hit}} 人感兴趣</h5>    
                                <p class="word-title2">{{item.items_secondtitle}}</p>
                            </div> 
                        </div>
                    </router-link>
                    </swiper-slide>
                    
                    <!-- Optional controls -->
                    <div class="swiper-pagination"  slot="pagination"></div>
                    
        
                </swiper>
            </div>
       </div>
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexDesign',
  data () {
    return {
      msg: 'index',
      id:6,
      data:[],
      swiperOption:{
                  pagination:'.swiper-pagination',
                  loop:true,
                  autoplay:3000,
                  autoplayDisableOnInteraction: false
              }
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
    this.getInfo()
    
  },
  methods: {
    getInfo(){
      // console.log(this.baseUrl)
      axios.get(this.baseUrl+'cms/design/to_index_news',
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
    //   console.log(response)
      this.data = response.data.data
      for(var i =0;i<this.data.length;i++){
                if(this.data[i].img_url!=null){
                    this.url = this.data[i].img_url.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                if(this.data[i].items!=null){
                    for(var b = 0;b<this.data[i].items.length;b++){

                        if(this.data[i].items[b].img_url!=null){
                            let url2 = this.data[i].items[b].img_url.url
                            this.data[i].items[b]['url2'] = url2
                            //  console.log(url2)
                            
                        }
                        this.data[i]['items_firsttitle'] = this.data[i].items[b].first_title
                        this.data[i]['items_hit'] = this.data[i].items[b].hit
                        this.data[i]['items_secondtitle'] = this.data[i].items[b].second_title
                   
                   
                    //  console.log('1')
                    }
                }

               
               
            }
            // console.log(this.data)
    }
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-design

img 
    width 100%
  
.container
  container()  

 a
    display block
    color black
.title  
    overflow hidden
.title>h1
  title()
.ac-title::after
  titleAfter()

.go
  go()
.swiper-item 
    height 610px
.swiper-body
    margin-top 15px
.left 
    float left
    width 270px
    background #149daf
    overflow hidden
    height 100%
.left-img 
    width 250px
    height 330px
    margin 10px
    // background black
.name 
    margin-left 10px
    font-size 24px
    color white 
    margin-top 20px
.work
    font-size 16px
    font-weight normal
p
    font-size 16px!important
    color white 
    margin 9px 0
    margin-left 10px
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-height 20px
.right 
    float right
    width 920px
    .right-item 
        width 300px 
        height 300px
        float left
        margin 0 3px 7px 3px
        background black
        overflow hidden
.item-word
    background #149daf!important
.word-title 
    color white
    font-size 20px  
    text-align center
    margin 0 16px
    margin-top 30px
.word-hit
    margin 0 16px
    color white
    font-size 20px  
    text-align center
    font-size 30px
    padding 15px 0
    border-bottom 1px dashed white
    margin-bottom 20px
.word-title2
    margin 0 16px
    color white
    font-size 16px  
    text-align left
    text-indent 40px
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:6;
    line-height 25px
</style>
